<template>
	<view class="note">
		<view class="contentNote" v-if="noteData.noteName !==null">
			<view class="note-title" v-if="noteData.noteName !== null">{{noteData.noteName}}</view>
			<view class="note-text" v-if="noteData.comment !==null" v-html="noteData.comment"></view>
			<view class="" style="height: 25rpx; width: 100%; background-color: #F1F1F1;">
			</view>
			<view class="" style="height: 150rpx;" v-if="noteData.sign_url !==null">
				<image :src=" noteData.sign_url">
				</image>
			</view>
			<view class="" v-if="noteData.video_url !==null"
				style="height: 25rpx; width: 100%; background-color: #F1F1F1;">
			</view>
			<view class="" v-if="noteData.video_url !==null && showVideo">
				<video :src="noteData.video_url" style="width: 100%;" controls>
				</video>
			</view>
		</view>
		<view class="add-note" @click="addNoteClick">
			<u-icon name="plus-circle-fill" color="#2979ff" size="50"></u-icon>
		</view>
		<uni-popup ref="addDialog" type="dialog">
			<noteAdd :result="noteData" @onSubmit="submitData" @onCancel="onCancel"></noteAdd>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getEmulateNote,
		addEmulateNote
	} from "@/api/home"
	import noteAdd from "../../activity/addNote"
	export default {
		props: {
			activeId: {
				type: String,
				default: ""
			}
		},
		watch: {
			activeId: {
				handler(val) {
					this.activity_id = val
					this.getNoteDetailData()
				},
				immediate: true,
				deep: true
			}
		},
		components: {
			noteAdd
		},
		data() {
			return {
				activity_id: "",
				noteData: {},
				showVideo: true
			}
		},
		methods: {
			getNoteDetailData() {
				getEmulateNote({
					activity_id: this.activity_id,
					deviceId: this.$store.state.user.deviceId
				}).then(res => {
					this.noteData = res;
					this.noteData.sign_url = getApp().globalData.config.imgUrl1 + "upload/" + this.noteData
						.sign_url
					this.noteData.video_url = getApp().globalData.config.imgUrl1 + "upload/" + this.noteData
						.video_url
				})
			},
			addNoteClick() {
				this.showVideo = false
				this.$refs.addDialog.open("center");
			},
			submitData(data) {
				data["activity_id"] = this.activity_id;
				addEmulateNote(data).then(res => {
					if (res.status == 0) {
						uni.$u.toast('保存成功');
						this.onCancel();
						this.getNoteDetailData();
					}
				})
			},
			onCancel() {
				this.showVideo = true
				this.$refs.addDialog.close()
			}
		}
	}
</script>

<style lang="scss">
	.note {
		.contentNote {
			background: #fff;
			margin-top: 30px;

			.note-title {
				font-size: 18px;
				border-bottom: 1px solid #ddd;
				padding: 10px 15px;
				color: #2c2c2c;
			}

			.note-text {
				padding: 10px 15px;
				font-size: 14px;
				color: #999;
			}
		}

		.add-note {
			position: fixed;
			bottom: 10vh;
			right: 5vw;
		}
	}
</style>
